<template>
  <div class="app-container home">
    <img src="@/assets/images/home/banner.png" alt="" class="banner" />
    <div class="public-foundation">
      <div class="info">
        <div class="title">
          <img src="@/assets/images/home/icon.png" alt="" />
          <span>城市数字公共基础设施</span>
        </div>
        <div class="content">
          城市数字公共基础设施(简称“数公基”)是数字孪生城市的重要组数字社会和数字城市建设的基石。“数公成部分，是数字经济、基”是以数据创新为驱动、通信网络为基础、数据算力为核心、市政基础设施智能化建设与改造为支撑的基础设施体系。涵盖了基础平台、基础数据、基础安全、基础应用、基础设施、基本标准、基本原则和基本运营管理等多个方面，是数字城市建设的公共性、集约性基础设施
        </div>
        <el-button class="more" @click="goMore">进一步了解</el-button>
      </div>
      <div class="open-item">
        <el-row>
          <el-col :span="12">
            <div class="item developer">
              <div class="title">入驻开发者</div>
              <div class="content">3415<span class="unit">名</span></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item project">
              <div class="title">开源项目</div>
              <div class="content">11<span class="unit">个</span></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="item course">
              <div class="title">开源课程</div>
              <div class="content">112<span class="unit">个</span></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item game">
              <div class="title">开源赛事</div>
              <div class="content">15<span class="unit">场</span></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="results-announcement-wrap">
      <div class="results-announcement">
        <img src="@/assets/images/home/notice.png" alt="" />
        <span class="results">2024HarmonyOS创新赛结果公示</span>
        <span class="date">2024/6/29</span>
      </div>
      <el-button class="more">更多活动</el-button>
    </div>
    <div>
      <el-row>
        <el-col :span="12">
          <div class="item">
            <img src="@/assets/images/home/open-tool.png" alt="" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item">
            <img src="@/assets/images/home/open-project.png" alt="" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="item">
            <img src="@/assets/images/home/open-course.png" alt="" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item">
            <img src="@/assets/images/home/open-interaction.png" alt="" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="join-us-wrap">
      <div class="join-us">加入我们</div>
      <div class="check-in-platform">入驻平台，成为平台开发者，共创未来 ！</div>
      <el-button class="apply-check-in">申请入驻</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      // 版本号
      version: "3.8.8",
    };
  },
  methods: {
    // 进一步了解
    goMore(){
       this.$router.push({ path: '/sgj-index' });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  .banner {
    width: 100%;
  }
  .public-foundation {
    display: flex;
    justify-content: space-between;
    padding: 48px 260px;
    .info {
      width: 50%;
      margin-right: 26px;
      background: url("~@/assets/images/home/info-bac.png") no-repeat;
      background-size: 100% 100%;
      padding: 24px 36px;
      border-radius: 5px;
      text-align: center;
      .title {
        text-align: center;

        img {
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
          color: rgb(255, 255, 255);
          font-family: NotoSansCJK-Regular-1;
          font-size: 30px;
          font-weight: 700;
          line-height: 38px;
          letter-spacing: 0px;
          text-align: left;
          margin-left: 20px;
        }
      }
      .content {
        color: rgb(255, 255, 255);
        font-family: SourceHanSansCN-VF-2;
        font-size: 20px;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: 0px;
        text-align: left;
        margin-top: 12px;
      }
      .more {
        margin-top: 12px;
        /* 主题色/默认 */
        width: 167px;
        height: 55.91px;
        /* 自动布局 */
        gap: 10;
        padding: 7px 33px 7px 33px;
        box-sizing: border-box;
        border: 2px solid rgb(255, 255, 255);
        border-radius: 12px;
        background-color: initial;
        color: rgb(255, 255, 255);
        font-family: SourceHanSansCN-VF-2;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
      }
    }
    .open-item {
      width: 50%;
      .item {
        height: 180px;
        &.developer {
          background: url("~@/assets/images/home/developer.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 13px;
        }
        &.project {
          background: url("~@/assets/images/home/project.png") no-repeat;
          background-size: 100% 100%;
          margin-left: 13px;
        }
        &.course {
          background: url("~@/assets/images/home/course.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 13px;
          margin-top: 26px;
        }
        &.game {
          background: url("~@/assets/images/home/game.png") no-repeat;
          background-size: 100% 100%;
          margin-top: 26px;
          margin-left: 13px;
        }
        .title {
          color: rgb(85, 96, 123);
          font-family: SourceHanSansCN-VF-2;
          font-size: 21.05px;
          font-weight: 500;
          line-height: 25.26px;
          letter-spacing: 0px;
          text-align: left;
          padding: 40px 0 0 27px;
        }
        .content {
          font-family: ysbthzt;
          font-size: 68px;
          padding-left: 27px;
          color: rgb(85, 96, 123);
          .unit {
            font-size: 18px;
          }
        }
      }
    }
  }
  .results-announcement-wrap {
    display: flex;
    justify-content: space-between;
    padding-left: 260px;
    padding-right: 112px;
    margin-bottom: 10px;
    .results-announcement {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .results {
        color: rgb(68, 75, 86);
        font-family: SourceHanSansCN-VF-2;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
        margin-left: 24px;
      }
      .date {
        color: rgb(153, 153, 153);
        font-family: SourceHanSansCN-VF-2;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
        margin-left: 24px;
      }
    }
    .more {
      background: rgb(250, 140, 22);
      width: 146px;
      height: 48px;
      padding: 7px 33px 7px 33px;
      flex: none;
      order: 1;
      flex-grow: 0;
      margin: 0px 149px;
      border-radius: 5px;
      color: rgb(255, 255, 255);
      font-family: SourceHanSansCN-VF-2;
      font-size: 20px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: right;
    }
  }
  .join-us-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 0 26px;
    background: url('~@/assets/images/home/join-us-bac.png');
    .join-us {
      color: rgb(51, 51, 51);
      font-family: SourceHanSansCN-VF-2;
      font-size: 24px;
      font-weight: 700;
      line-height: 38.2px;
      letter-spacing: 0px;
      text-align: center;
      margin-bottom: 10px;
    }
    .check-in-platform {
      color: rgb(102, 102, 102);
      font-family: SourceHanSansCN-VF-2;
      font-size: 24px;
      font-weight: 400;
      line-height: 38.2px;
      letter-spacing: 0px;
      text-align: center;
      margin-bottom: 10px;
    }
    .apply-check-in {
      border-radius: 6.36px;
      background: rgb(255, 255, 255);
      padding: 12.73px 30.55px 12.73px 30.55px;
      color: rgb(13, 134, 255);
      font-family: SourceHanSansCN-VF-2;
      font-size: 25.45px;
      font-weight: 700;
      line-height: 30.55px;
      letter-spacing: 0px;
      text-align: left;
      width: 165.45px;
      height: 56px;
    }
  }
}
</style>

